<template>
  <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
           :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened>
    <h3>{{
        isCollapse ? "棘手": "吉首大学课程管理系统"
      }}</h3>
    <template v-for="firstItem in items">
      <template v-if="firstItem.haveNext">
        <el-submenu :index="firstItem.title" :key="firstItem.title">
          <template slot="title">
            <i :class="firstItem.icon"></i>
            <span slot="title">{{ firstItem.title }}</span>
          </template>
          <template v-for="secondItem in firstItem.haveNext">
            <el-submenu v-if="secondItem.haveNext" :index="secondItem.title" :key="secondItem.title">
              <template slot="title">
                <i :class="secondItem.icon"></i>
                <span slot="title">{{ secondItem.title }}</span>
              </template>
              <el-menu-item @click="clickMenu(thirdItem)" v-for="thirdItem in secondItem.haveNext" :key="thirdItem.title" :index="thirdItem.url">
                <i :class="thirdItem.icon"></i>
                <span slot="title">{{ thirdItem.title }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item @click="clickMenu(secondItem)" v-else :index="secondItem.url" :key="secondItem.title">
              <i :class="secondItem.icon"></i>
              <span slot="title">{{ secondItem.title }}</span>
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item @click="clickMenu(firstItem)" :index="firstItem.url" :key="firstItem.url">
          <i :class="firstItem.icon"></i>
          <span slot="title">{{ firstItem.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏索引，最多三层
      items: [{
        icon: "el-icon-folder",
        title: "教师管理",
        haveNext: [{
          icon: "el-icon-document-add",
          url: "/admin/teachers-auditing",
          title: "教师注册审核"
        }, {
          icon: "el-icon-folder-opened",
          url: "/admin/teachers-info",
          title: "教师信息管理"
        }]
      }, {
        icon: "el-icon-user-solid",
        title: "学生管理",
        haveNext: [{
          icon: "el-icon-s-custom",
          url: "/admin/students-auditing",
          title: "学生注册审核"
        }, {
          icon: "el-icon-user",
          url: "/admin/students-info",
          title: "学生信息管理"
        }, {
          icon: "el-icon-close",
          url: "/admin/students-course-record",
          title: "学生课堂选课记录"
        }]
      }, {
        icon: "el-icon-chat-dot-round",
        title: "课程管理",
        haveNext: [{
          icon: "el-icon-setting",
          url: "/admin/courses-info",
          title: "课程信息管理"
        },{
          icon: "el-icon-s-custom",
          url: "/admin/students-courses-mange",
          title: "课堂管理"
        }]
      }, {
        icon: "el-icon-s-promotion",
        title: "报告统计",
        haveNext: [{
          icon: "el-icon-chat-square",
          url: "/admin/courses-comment-statistics",
          title: "课程评价统计"
        }, {
          icon: "el-icon-s-check",
          url: "/admin/courses-select-report",
          title: "选课报告"
        }]
      }]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    // 点击导航栏的项目
    clickMenu(item){
      //跳转路由
      if (this.$route.path !== item.url) {
        //防止自己跳自己报错
        this.$router.push(item.url)
      }
      const data = {
        url: item.url,
        title: item.title
      }
      //增添面包屑的数据列表
      this.$store.commit('addTab', data)
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  height: 100vh;
  border-right: none;

  h3 {
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }
}
</style>
